<template>
    <div>
        <div style="clear:both;"></div>

		<!-- 页面头部 start -->
		<div class="header w990 bc mt15">
			<div class="logo w990">
				<h2 class="fl"><a href="index.html"><img src="~/assets/images/logo.png" alt="京西商城"></a></h2>
				<div class="flow fr flow2">
					<ul>
						<li>1.我的购物车</li>
						<li class="cur">2.填写核对订单信息</li>
						<li>3.成功提交订单</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 页面头部 end -->

		<div style="clear:both;"></div>

		<!-- 主体部分 start -->
		<div class="fillin w990 bc mt15">
			<div class="fillin_hd">
				<h2>填写并核对订单信息</h2>
			</div>

			<div class="fillin_bd">
				<!-- 收货人信息  start-->
				<div class="address">
					<h3>收货人信息 <a href="javascript:;" id="address_modify">[修改]</a></h3>
					<div class="address_info">
						<p>{{defaultAddress.shr_name}} {{defaultAddress.shr_mobile}} </p>
						<p>{{defaultAddress.shr_province}} {{defaultAddress.shr_city}} {{defaultAddress.shr_area}} {{defaultAddress.shr_address}} </p>
					</div>

					<div class="address_select none">
						<ul>
							<li class="cur" v-for="(v,k) in addressList" :key="k">
								<input type="radio" @click.prevent="defaultAddr(k)" v-model="v.id" :value="defaultAddress.id" />{{v.shr_name}} {{v.shr_province}} {{v.shr_city}} {{v.shr_area}} {{v.shr_address}}{{v.shr_mobile}}
								<a href="" @click.prevent="defaultAddr(k)">设为默认地址</a>
								<a href="">编辑</a>
								<a href="">删除</a>
							</li>
							<li>
								<button @click="useNewAddress">使用新地址</button></li>
						</ul>
						<form v-if="showNew" action="" name="address_form">
							<ul>
								<li>
									<label for=""><span>*</span>收 货 人：</label>
									<input type="text" v-model="address.shr_name" class="txt" />
								</li>
								<li>
									<label for=""><span>*</span>所在地区：</label>
									<select v-model="address.shr_province" id="">
										<option value="">请选择</option>
										<option value="1">北京</option>
										<option value="2">上海</option>
										<option value="3">天津</option>
										<option value="4">重庆</option>
										<option value="5">武汉</option>
									</select>

									<select v-model="address.shr_city" id="">
										<option value="">请选择</option>
										<option value="1">朝阳区</option>
										<option value="2">东城区</option>
										<option value="3">西城区</option>
										<option value="4">海淀区</option>
										<option value="5">昌平区</option>
									</select>

									<select v-model="address.shr_area" id="">
										<option value="">请选择</option>
										<option value="1">西二旗</option>
										<option value="2">西三旗</option>
										<option value="3">三环以内</option>
									</select>
								</li>
								<li>
									<label for=""><span>*</span>详细地址：</label>
									<input type="text" v-model="address.shr_address" class="txt address" />
								</li>
								<li>
									<label for=""><span>*</span>手机号码：</label>
									<input type="text" v-model="address.shr_mobile" class="txt" />
								</li>
							</ul>
						</form>
						<a href="" class="confirm_btn" @click.prevent="saveAddress"><span>保存收货人信息</span></a>
					</div>
				</div>
				<!-- 收货人信息  end-->

				<!-- 配送方式 start -->
				<div class="delivery">
					<h3>送货方式 <a href="javascript:;" id="delivery_modify">[修改]</a></h3>
					<div class="delivery_info">
						<p>普通快递送货上门</p>
						<p>送货时间不限</p>
					</div>

					<div class="delivery_select none">
						<table>
							<thead>
								<tr>
									<th class="col1">送货方式</th>
									<th class="col2">运费</th>
									<th class="col3">运费标准</th>
								</tr>
							</thead>
							<tbody>
								<tr class="cur">
									<td>
										<input type="radio" v-model="orders.post_method" value="1" />普通快递送货上门
										<select v-model="orders.createdTime" id="">
											<option value="">时间不限</option>
											<option value="">工作日，周一到周五</option>
											<option value="">周六日及公众假期</option>
										</select>
									</td>
									<td>￥10.00</td>
									<td>每张订单不满499.00元,运费15.00元, 订单4...</td>
								</tr>
								<tr>

									<td><input type="radio" v-model="orders.post_method" value="2" />特快专递</td>
									<td>￥40.00</td>
									<td>每张订单不满499.00元,运费40.00元, 订单4...</td>
								</tr>
								<tr>

									<td><input type="radio" v-model="orders.post_method" value="3" />加急快递送货上门</td>
									<td>￥40.00</td>
									<td>每张订单不满499.00元,运费40.00元, 订单4...</td>
								</tr>
								<tr>

									<td><input type="radio" v-model="orders.post_method" value="4" />平邮</td>
									<td>￥10.00</td>
									<td>每张订单不满499.00元,运费15.00元, 订单4...</td>
								</tr>
							</tbody>
						</table>
						<a href="" class="confirm_btn"><span>确认送货方式</span></a>
					</div>
				</div>
				<!-- 配送方式 end -->

				<!-- 支付方式  start-->
				<div class="pay">
					<h3>支付方式 <a href="javascript:;" id="pay_modify">[修改]</a></h3>
					<div class="pay_info">
						<p>货到付款</p>
					</div>

					<div class="pay_select none">
						<table>
							<tbody>
								<tr class="cur">
									<td class="col1"><input type="radio" v-model="orders.pay_method" />货到付款</td>
									<td class="col2">送货上门后再收款，支持现金、POS机刷卡、支票支付</td>
								</tr>
								<tr>
									<td class="col1"><input type="radio" v-model="orders.pay_method" />在线支付</td>
									<td class="col2">即时到帐，支持绝大数银行借记卡及部分银行信用卡</td>
								</tr>
								<tr>
									<td class="col1"><input type="radio" v-model="orders.pay_method" />上门自提</td>
									<td class="col2">自提时付款，支持现金、POS刷卡、支票支付</td>
								</tr>
								<tr>
									<td class="col1"><input type="radio" v-model="orders.pay_method" />邮局汇款</td>
									<td class="col2">通过快钱平台收款 汇款后1-3个工作日到账</td>
								</tr>
							</tbody>
						</table>
						<a href="" class="confirm_btn"><span>确认支付方式</span></a>
					</div>
				</div>
				<!-- 支付方式  end-->

				<!-- 发票信息 start-->
				<div class="receipt">
					<h3>发票信息 <a href="javascript:;" id="receipt_modify">[修改]</a></h3>
					<div class="receipt_info">
						<p>个人发票</p>
						<p>内容：明细</p>
					</div>

					<div class="receipt_select none">
						<form action="">
							<ul>
								<li>
									<label for="">发票抬头：</label>
									<input type="radio" v-model="orders.invoice.type" value="1" class="personal" />个人
									<input type="radio" v-model="orders.invoice.type" class="company" />单位
									<input type="text" v-model="orders.invoice.company" class="txt company_input" disabled="disabled" />
								</li>
								<li>
									<label for="">发票内容：</label>
									<input type="radio" name="content" checked="checked" />明细
									<input type="radio" name="content" />办公用品
									<input type="radio" name="content" />体育休闲
									<input type="radio" name="content" />耗材
								</li>
							</ul>
						</form>
						<a href="" class="confirm_btn"><span>确认发票信息</span></a>
					</div>
				</div>
				<!-- 发票信息 end-->

				<!-- 商品清单 start -->
				<div class="goods">
					<h3>商品清单</h3>
					<table>
						<thead>
							<tr>
								<th class="col1">商品</th>
								<th class="col2">规格</th>
								<th class="col3">价格</th>
								<th class="col4">数量</th>
								<th class="col5">小计</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(v,k) in carts" :key="k">
								<td class="col1"><a href=""><img :src="v.midlogo" alt="" /></a> <strong><a href="">{{v.goods_name}}</a></strong></td>
								<td class="col2">
									<p>{{v.spec_info}}</p>
								</td>
								<td class="col3">￥{{v.price}}</td>
								<td class="col4">{{v.count}}</td>
								<td class="col5"><span>￥{{(v.price*v.count).toFixed(2)}}</span></td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td colspan="5">
									<ul>
										<li>
											<span>{{carts.length}} 件商品，总商品金额：</span>
											<em>￥{{totalPrice}}</em>
										</li>
										<li>
											<span>返现：</span>
											<em>-￥240.00</em>
										</li>
										<li>
											<span>运费：</span>
											<em>￥10.00</em>
										</li>
										<li>
											<span>应付总额：</span>
											<em>￥5076.00</em>
										</li>
									</ul>
								</td>
							</tr>
						</tfoot>
					</table>
				</div>
				<!-- 商品清单 end -->

			</div>

			<div class="fillin_ft">
				<a href="" @click.prevent="submitOrder"><span>提交订单</span></a>
				<p>应付总额：<strong>￥5076.00元</strong></p>

			</div>
		</div>
		<!-- 主体部分 end -->

		<div style="clear:both;"></div>
    </div>
</template>

<script>
import payApi from '~/api/pay.js'
import '~/assets/style/fillin.css'

export default {
    data(){
        return{
            addressList:[],
            defaultAddress:{},
            showNew:false,
            address:{},
            //提交订单参数
            orders:{
                invoice:{}
            },
            carts:[]
        }
    },
    methods:{
        //设置默认地址
        defaultAddr:function(k){				
            //把当前设置的默认对象赋值给默认对象即可
            this.defaultAddress = this.addressList[k];
        },
        useNewAddress:function(){

            //判断
            if(this.showNew){
                this.showNew = false;
            }else{
                this.showNew = true;
            }

                            
        },
        //保存地址
        saveAddress:function(){
            //调用api方法，实现地址的保存
            payApi.saveAddress(this.address).then(res=>{
                //判断
                if(res.data.errno==0){
                    //添加成功
                    alert("添加成功");
                }else{
                    alert(res.data.errmsg);
                }
            })
        },
        //提交订单
        submitOrder:function(){
            //把默认地址id赋值给订单地址id
            this.orders.id = this.defaultAddress.id;
            //调用api方法，提交订单
            payApi.createOrder(this.orders).then(res=>{
                //判断订单提交是否成功
                if(res.data.errno==0){
                    //提交成功
                    //跳转到订单提交成功页面
					// location.href = "flow3.html?sn="+this.orders.id;
					this.$router.push('/order/'+this.orders.id)
                }else{
                    alert(res.data.errmsg);
                }
            })
        }
    },
	computed:{
		//计算总价格
		totalPrice:function(){
			var totalPrice=0;
			//循环购物车列表
			for(var i=0;i<this.carts.length;i++){
				totalPrice+=this.carts[i].price * this.carts[i].count;
			}

			return totalPrice;
		}
	}
}
</script>

<style>

</style>
